<template>
  <div class="page">
    <navigation>申诉</navigation>
    <div class="form">
      <input v-model="node" type="text" class="form-inp" placeholder="申诉原因">
      <div class="form-tip">申诉图片</div>
      <label class="form-file">
        <i class="iconfont icon-plus"></i>
        <input type="file" @change="uploadImg">
        <img v-if="imgUrl" class="img" :src="imgUrl" alt="">
      </label>
    </div>
    <div class="ftbar">
      <button type="button" class="btn confirm" @click="submit">完成</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  data () {
    return {
      orderId: this.$route.params.orderid,
      node: '',
      imgUrl: ''
    }
  },
  computed: {
    ...mapState({
      host: state => state.host
    })
  },
  created () {
    this.orderId = this.$route.query.orderid
  },
  methods: {
    ...mapActions({
      otcUpdateImage: 'otc/otcUpdateImage',
      otcAppeal: 'otc/otcAppeal'
    }),
    uploadImg (event) {
      const formData = new FormData()
      formData.append('image', event.target.files[0])
      this.otcUpdateImage(formData)
        .then((data) => {
          this.imgUrl = data.data.urlPath
        })
        .catch((data) => {
          this.$toast.error(data.data.message)
        })
    },
    submit () {
      if (this.loading) { return false }
      const payload = {
        order_id: this.orderId
      }
      do {
        if (!this.node) {
          this.errmsg = '请填写申诉原因'
          break
        }
        payload.describe = this.node
        if (!this.imgUrl) {
          this.errmsg = '请上传申诉图片'
          break
        }
        payload.image = this.imgUrl
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      this.loading = true
      this.otcAppeal(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .finally((data) => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
.form {
  background-color: #fff;
  padding-bottom: 40px;
}
.form-inp {
  padding: 10px 15px;
  font-size: 14px;
  display: block;
  width: 100%;
  line-height: 30px;
  box-sizing: border-box;
  border-top: 10px solid #efefef;
}
.form-tip {
  line-height: 40px;
  padding: 0 15px;
  color: #888888;
  background-color: #efefef;
}
.form-file {
  position: relative;
  display: block;
  margin: 15px;
  border: 1px solid #eee;
  width: 50vw;
  height: 68vw;
  font-size: 0;
}
.form-file input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
.form-file .iconfont {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  margin: -10px 0 0 -10px;
  color: #666;
}
.form-file:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.form-file .img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
}
.ftbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ftbar .btn {
  flex: 1 0 0;
  line-height: 40px;
  height: 40px;
  font-size: 16px;
}
.ftbar .btn.confirm {
  background: #1b8afe;
  color: #fff;
}

</style>
